<template>
  <div class="poster-wrap-page">
    <img
      v-for="(item, index) in activiteList"
      :key="index"
      :src="item.img"
      alt=""
      v-lazy="item.img"
    />
    <!-- 分享按钮 -->
    <div class="share-activity-btn" @click="showPoster">分享</div>
    <!-- 海报 -->
    <posters
      :visible.sync="isShowPoster"
      :backgroundImg="placardImgUrl"
      :shareRes="shopInfo"
    />
    <postersV2 :visible.sync="isShowPosterV2" :shareObj="shopInfo" />
  </div>
</template>
<script>
import posters from '@/components/poster/poster.vue';
import postersV2 from '@/components/poster/posterV2.vue';

const pic = [
  'https://akmer.aikucun.com/c5704c6bf306f6b6e3422f0ba3d4afb07160c842_1589856577548_29.png',
  'https://akmer.aikucun.com/99383f6a8c0d0741df738c9e6c5bf9080a299e2f_1589856577601_84.png',
  'https://akmer.aikucun.com/03ae2d94907e8ba7c6c8fc6e7d23807913a2dbe1_1589856577627_88.png',
  'https://akmer.aikucun.com/591694466c988d2530ca324a7590df69f20402bd_1589856577652_29.png'
];

export default {
  components: {
    posters,
    postersV2
  },
  data() {
    return {
      activiteList: [
        {
          img: pic[0],
          id: '',
          liveid: ''
        },
        {
          img: pic[1],
          id: '',
          liveid: ''
        },
        {
          img: pic[2],
          id: '712627030245818627',
          liveid: '1262937321927073793'
        },
        {
          img: pic[3],
          id: '712609411342057733',
          liveid: '1262734210541596674'
        },
        {
          img: pic[4],
          id: '',
          liveid: ''
        },
        {
          img: pic[5],
          id: '',
          liveid: ''
        },
        {
          img: pic[6],
          id: '712637093211586822',
          liveid: '1262951759103500289'
        },
        {
          img: pic[7],
          id: '712627030245818626',
          liveid: '1262927125461180417'
        },
        {
          img: pic[8],
          id: '712715108960469263',
          liveid: '1262961602921078786'
        },
        {
          img: pic[9],
          id: '712627030245818628',
          liveid: '1262940762726920194'
        },
        {
          img: pic[10],
          id: '712619477612937480',
          liveid: '1262932350510817281'
        },
        {
          img: pic[11],
          id: '',
          liveid: ''
        }
      ],
      isShowPoster: false,
      isShowPosterV2: false,
      placardImgUrl:
        'https://akmer.aikucun.com/b79ee523e9d7d8cf9926552a5da0b51e0da0e0c3_1589856290328_60.png',
      // 分享海报信息
      shopInfo: {
        forwarder: {
          forwarderShopLogoUrl:
            'http://thirdwx.qlogo.cn/mmopen/vi_32/Oa8Uib7WuPiceGNkduVMUN2ia9YiayTlkpdpzOH2bibibCPesZ51icc74VELEC36oibZLMnqq5h4M7PhHN0h01ZxGjSM0A/132',
          forwarderName: '无心_2014',
          forwarderMessage: '@无心_2014 为您服务',
          forwarderShopName: '小小',
          forwardShopDesc: '品牌好货，限时抢不停'
        },
        mainPic:
          'https://file-oss.aikucun.com/akucun-cms-manager/3b93fd2d045d59af27a25c719945db1d9fe3decb_1630663527454_45.jpg',
        qrCode: 'https://mall.xiangtuan.xyz/api/shortCode?c=JwvCK7',
        tagList: ['正品好货', '超值特卖', '售后无忧'],
        nickname: 'xiaoxioa',
        placardSlogan: '全场满减，低至3折起',
        shopName: 'aaa',
        logoUrl:
          'https://akmer.aikucun.com/b79ee523e9d7d8cf9926552a5da0b51e0da0e0c3_1589856290328_60.png',
        link: 'https://mall.xiangtuan.xyz/api/shortCode?c=JwvCK7'
      }
    };
  },
  methods: {
    showPoster() {
      // 兜底
      if (this.shopInfo.mainPic) {
        this.isShowPosterV2 = true;
      } else if (this.placardImgUrl && this.shopInfo.link) {
        this.isShowPoster = true;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.poster-wrap-page {
  font-size: 0;
  img {
    width: 100%;
  }
}

.share-activity-btn {
  position: fixed;
  left: 30px;
  bottom: 16px;
  width: 315px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(252, 96, 80, 1) 0%,
    rgba(231, 29, 28, 1) 100%
  );
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  color: white;
  font-size: 16px;
}
</style>
